<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--
        案例:实现步骤
        1.实现静态UI效果
            用传统的方式实现标签结构和样式

        2.基于数据重构UI效果
            将静态的结构和样式重构为基于Vue模板语法的形式
            处理事件绑定和js控制范围
        -->

    </head>
    <body>
        <div id="app">
            <div class="tab">
                <ul>
                    <li :key='item.id' v-for='(item, index) in list'>lemon</li>
                </ul>
                <div :key='item.id' v-for='(item, index) in list' class="current">
                    <img src="item.path">
                </div>
            </div>
        </div>

    </body>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                borderStyle: '1px solid blue',
                widthStyle: '100px',
                heightStyle: '200px',
                displayStyle: 'inline',
                list: [{
                    id:1,
                    title: 'apple',
                    path: '../img/apple.jpg'
                },{
                    id: 2,
                    title: 'orange',
                    path: '../img/orange.jpg'
                },{
                    id: 3,
                    title: 'lemon',
                    path: '../img/banana.jpg'
                }]

            },
            methods: {
                handler: function () {
                    this.display = none
                }
            }
        });

    </script>


</html>